<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>demo7</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic
        }
        .active{
            letter-spacing: 0.5em;
        }
    </style>
    </head>
    <body>
        <div id="app">
            <!-- 第一种css方式 直接传递一个数据 这里需要用 v-bind 做数据绑定
                了解就行 感觉还没有普通class方便 下面三元表达式 如果 flag为true
                则激活active 否则返回空 不激活
            -->
            <!-- <h1 :class="['thin','red','italic', flag?'active':'']">这是一个很大{{msg}}</h1> -->

            <!-- 第二种方法 三元表达式转成对象方式来实现 提到代码可读性 如果 flag为true
                则激活active 否则返回空 不激活 -->
            <!-- <h1 :class="[{'active' : flag}]">这是一个很大{{msg}}</h1> -->

            <!-- 第三种方法 对象的属性是类名 可引号可不引号 属性的值 是一个标识符
                见data中classobj的代码
            -->
            <h1 :class="classObj">这是一个很大{{msg}}</h1>


        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    flag: true,
                    classObj: {red: true, thin: true, italic: false}
                },
                methods:{

                }
            })
        </script>
    </body>
</html>